<template>
	<view class="container">
		<view style="padding-bottom: 100rpx;">
				<view class="tui-product-list">
						
		
					<view class="tui-product-container" >
		
						<!-- <template is="productItem" data="{{item,index:index}}" /> -->
						<!--商品列表-->
						<view class="tui-pro-item" hover-class="hover" :hover-start-time="150">
							<image :src="item.thumbnail" class="tui-pro-img" :class="[isList ? 'tui-proimg-list' : '']"   style="width: 260rpx;height: 260rpx !important;border-radius: 30rpx;"/>
							<view class="tui-pro-content">
								<view class="tui-pro-tit">{{ item.title }}</view>
		
								<view>
									<view class="tui-pro-price">
										<tui-icon  name="clock" :size='20' ></tui-icon><text class="tui-factory-price">活动时间:{{ item.activitytimestr }}</text>
									</view>
									<view class="tui-pro-price">
										<tui-icon  name="weather" :size='20' ></tui-icon><text class="tui-factory-price">活动地点: {{ item.place }}</text>
									</view>
									
									
								</view>
							</view>
						</view>
						<!--商品列表-->
		
					</view>
		
				</view>
				
				<view class="paragraph"></view>
				
				
				<view class="personnel" >
				
					<view>
						<text style="color:#aaa">基础费用</text>									

							<view class="money" v-if="total_price">
								<text>成人</text>
								<text></text>
								<text style="text-align: center;width:20%">总计</text>
								<text style="color: red;text-align: right;width:10%">￥{{total_price}}</text>
							</view>
							
							<view class="money" v-if="total_price_er">
								<text>儿童</text>
								<text></text>
								<text style="text-align: center;width:20%">总计</text>
								<text style="color: red;text-align: right;width:10%">￥{{total_price_er}}</text>
							</view>
							
							<view class="money" v-if="total_price_pets">
								<text>宠物</text>
								<text></text>
								<text style="text-align: center;width:20%">总计</text>
								<text style="color: red;text-align: right;width:10%">￥{{total_price_pets}}</text>
							</view>

						
					</view>
					
					<view v-if="total_price_jiudian">
						<text style="color:#aaa">酒店费用</text>
						<block v-for="(info,index) in jiudian">
							<view v-if="info.num >0" class="money">
								<text>{{info.title}}</text>
								<text></text>
								<text style="text-align: center;width:20%">总计</text>
								<text style="color: red;text-align: right;width:10%">￥{{info.price*info.num}}</text>
							</view>
						</block>

					</view>
					
					
					<view v-if="total_price_car">
					<text style="color:#aaa">车费</text>
						<block v-for="(info,index) in car">
							<view v-if="info.carnum >0" class="money">
								<text>{{info.title}}</text>
								<text></text>
								<text style="text-align: center;width:20%">总计</text>
								<text style="color: red;text-align: right;width:10%">￥{{info.price*info.carnum}}</text>
							</view>
						</block>
					
					</view>
				</view>
				
				<view class="paragraph"></view>
				
				
				<view class="personnel">
				
					<view>
						<text style="color:#aaa">优惠卷</text>		
						<tui-list-cell @tap="detail('/pages/coupon/coupon?type=0&cou=2&price='+total_price_zong+'&productid='+item.id)" :arrow="true" last="true" style="background-color:#FAFAFA">
							<view class="tui-item-box" style="width:90%;" v-if="coupon">
								<text class="tui-list-cell_name">{{coupon.coupon.title}}</text>
								<view class="tui-right" style="float:right;color: #dc3545;">-￥{{coupon.coupon.price}}元</view>
							</view>
							<view class="tui-item-box" style="width:90%;" v-else>
								<text class="tui-list-cell_name">优惠卷</text>
								<view class="tui-right" style="float:right">未使用优惠卷</view>
							</view>
						</tui-list-cell>
					</view>
					
				</view>
				
				
				<view class="paragraph"></view>
				
				
				<view class="personnel">
				
					<view>
						<text style="color:#aaa">积分抵扣(您的积分还有{{userinfo.score}}积分可以作为抵用)</text>		
						<tui-list-cell :hover="false" padding="0">
							<view class="tui-line-cell">
								<view class="tui-title">积分</view>
								<input  type="number" placeholder-class="tui-phcolor" class="tui-input"  :value="search" @input="messagesearch"   placeholder="请输入抵扣积分"  />
							</view>
						</tui-list-cell>
					</view>
					
				</view>
				
				
				<view class="paragraph"></view>
				
				
				<view class="personnel">

					<view>
						<text class="title">参团人员</text>
						<text class="price">￥{{ item.price }}/成人 ￥{{item.children_price}}/儿童</text>		
								
						<block v-for="(item,index) in lianxi" :key="index">
							<view v-if="item.sign=='1'" style="padding-top: 20rpx;">
								<view class="sign_name">参团人员</view>
								<tui-list-cell :hover="false" padding="0">
									<view class="tui-line-cell">
										<view class="tui-title">姓名</view>
										<view class="tui-input">{{item.name}}</view>
									</view>
								</tui-list-cell>
								<tui-list-cell :hover="false" padding="0">
									<view class="tui-line-cell">
										<view class="tui-title">类别</view>
										<view class="tui-input" v-if="item.sex=='1'">成人</view>
										<view class="tui-input" v-else>儿童</view>
									</view>
								</tui-list-cell>
								<tui-list-cell :hover="false" padding="0">
									<view class="tui-line-cell">
										<view class="tui-title">手机号</view>
										<view class="tui-input" >{{item.phone}}</view>
									</view>
								</tui-list-cell>
								<tui-list-cell :hover="false" padding="0">
									<view class="tui-line-cell">
										<view class="tui-title">证件号码</view>
										<view class="tui-input" >{{item.certificates}}</view>
									</view>
								</tui-list-cell>
								<tui-list-cell :hover="false" padding="0">
									<view class="tui-line-cell">
										<view class="tui-title">出生日期</view>
										<view class="tui-input" >{{item.birthday}}</view>
									</view>
								</tui-list-cell>
							</view>
						</block>
						
					</view>
				</view>
				
				<view class="paragraph"></view>
				
				
				<view class="personnel">
					<view>
						<text class="title">参团宠物</text>
						<text class="price">￥{{ item.pets_price }}/宠物</text>	
									
						<block v-for="(item,index) in petslist" :key="index">
							<view v-if="item.sign=='1'" style="padding-top: 20rpx;">
								<view class="sign_name">参团宠物</view>
								<tui-list-cell :hover="false" padding="0">
									<view class="tui-line-cell">
										<view class="tui-title">昵称</view>
										<view class="tui-input">{{item.title}}</view>
									</view>
								</tui-list-cell>

								<tui-list-cell :hover="false" padding="0">
									<view class="tui-line-cell">
										<view class="tui-title">品种</view>
										<view class="tui-input" >{{item.varieties}}</view>
									</view>
								</tui-list-cell>
								<tui-list-cell :hover="false" padding="0">
									<view class="tui-line-cell">
										<view class="tui-title">毛色</view>
										<view class="tui-input" >{{item.color}}</view>
									</view>
								</tui-list-cell>
								<tui-list-cell :hover="false" padding="0">
									<view class="tui-line-cell">
										<view class="tui-title">注射疫苗时间</view>
										<view class="tui-input" >{{item.vaccines_time}}</view>
									</view>
								</tui-list-cell>
								<tui-list-cell :hover="false" padding="0">
									<view class="tui-line-cell">
										<view class="tui-title">宠物生日</view>
										<view class="tui-input" >{{item.birthday}}</view>
									</view>
								</tui-list-cell>
							</view>
						</block>
					</view>
				</view>
				
				<view class="paragraph"></view>
				
			</view>		
							
							
							
			<!--底部操作栏-->
			<view class="tui-operation" style="position: fixed;bottom: 0;">
				<view class="tui-operation-left tui-col-4">
					<view class="tui-operation-item" hover-class="opcity" :hover-stay-time="150" v-if="total_price_c">
						<text>总价: </text><text style="color:red">￥{{total_price_c}}元</text>
					</view>
					
					<view class="tui-operation-item" hover-class="opcity" :hover-stay-time="150" v-else>
						<text>总价: </text><text style="color:red">￥{{total_price_z}}元</text>
					</view>

				</view>
				<view class="tui-operation-right tui-right-flex tui-col-8 tui-btnbox-4" style="margin-right: 50rpx;" @tap="submit()">
					<view class="tui-flex-1">
						<tui-button type="warning" shape="circle" size="mini" >提交订单</tui-button>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	var api = require('@/common/api.js')
	import tuiIcon from "@/components/icon/icon"

	import tuiListCell from "@/components/list-cell/list-cell"
	export default {
		components: {
			tuiIcon,
			tuiListCell
		},
		data() {
			return {
				item:'',
				lianxi:[],
				petslist:[],
				jiudian:[],
				car:[],
				total_price:'',
				total_price_er:'',
				total_price_pets:'',
				total_price_z:'',
				total_price_car:'',
				total_price_jiudian:'',
				coupon:'',
				sinput:'',
				userinfo:'',
				info:[],
				total_price_zong:'',
				search:''

			}
		},
		onLoad: function(options) {
			if(this.tui.isLogin()){
				this.userinfo = uni.getStorageSync("user")
			}else{
				uni.showToast({
					title:"您没有登陆，请先登录",
					icon:"none"
				})
				setTimeout(function(){
					uni.navigateTo({
						url:"/pages/mall-extend/my/my"
					})
				},1000)
			}
			let dataList = JSON.parse(decodeURIComponent(options.query));
			console.log(dataList);
			this.item = dataList.items;
			this.lianxi = dataList.lianxi;
			this.petslist = dataList.petslist;
			this.jiudian = dataList.jiudian;
			this.car = dataList.car;
			this.info = dataList.info;
			this.calculate();
		},
		methods: {
			messagesearch:function(event){

				this.search = event.detail.value;
	
			},
			//计算金额
			calculate:function(){
				let total_price = 0;
				let total_price_er = 0;
				let total_price_pets = 0;
				let total_price_jiudian = 0;
				let total_price_car = 0;
				this.lianxi.forEach( e => {
					if(e.sign == '1'){
						if(e.sex =='1'){
							total_price += this.item.price; 
						}else{
							total_price_er  += this.item.children_price; 
						}
					}
					
				})
				this.petslist.forEach( f => {
					if(f.sign == '1'){
						total_price_pets += this.item.pets_price; 
					}
					
				})
				
				this.jiudian.forEach( f => {
					if(f.num > 0){
						total_price_jiudian += f.price*f.num; 	
					}					
				})
				
				this.car.forEach( f => {
					if(f.carnum > 0){
						total_price_car += f.price*f.carnum; 
					}
				})
				this.total_price = total_price;
				this.total_price_er = total_price_er;
				this.total_price_pets = total_price_pets;
				this.total_price_jiudian = total_price_jiudian;
				this.total_price_car = total_price_car;
				this.total_price_z = total_price_jiudian + total_price_car + total_price + total_price_er + total_price_pets;
				this.total_price_zong = total_price_jiudian + total_price_car + total_price + total_price_er + total_price_pets;

			},
			
			detail(page) {
				uni.navigateTo({
					url: page
				})
			},
			submit(){
				let that = this
				console.log(that.search);
				if(that.search < that.userinfo.score  && that.search>0 && that.search < that.total_price_z || that.search == ''){

					api.post({
						url:'order/order',
						data: {
							user_id:that.userinfo.id,
							name:that.info.name,
							phone:that.info.phone,
							address:that.info.address,
							product_id:that.item.id,
							price:that.item.price,
							total_price:that.total_price_z - that.search,
							coupon_id:that.coupon.id,
							integral:that.search,
							car_id:JSON.stringify(that.car),
							personnel:JSON.stringify(that.lianxi),
							pets_id:JSON.stringify(that.petslist),
							room:JSON.stringify(that.jiudian),
						},
						success: res => {
							console.log('返回的数据',res);
							let datainfo = res.data;
							api.post({
								url:"order/orderPay",
								data:datainfo,
								success:res2=>{
									console.log('返回数据',res2);
									let info = res2.data;
									//调用微信支付api
									 uni.requestPayment({
										 provider: 'wxpay',
										 timeStamp: info.timeStamp,
										 nonceStr: info.nonceStr,
										 package: info.package,
										 signType: info.signType,
										 paySign: info.paySign, //签名，这个要提前获取一下
										 success: function (res) {
											//跳转到支付成功的订单页面
											console.log('支付返回的数据',res);
											 uni.reLaunch({
												url:'/pages/mall-extend/myOrder/myOrder',
											 })
										 },
										 fail: function (err) {
											 console.log(err);
											 uni.showToast({
												 title:'支付失败',
												 icon:'none'
											 })
											 uni.reLaunch({
											 	url:'/pages/mall-extend/myOrder/myOrder'
											 })
										 }
									 }) 
								}
							})
					
							
						},
						fail:function(res){
							console.log(res);
						},
					})
				}else if(that.search > that.total_price_z){
					uni.showToast({
						title: '您的积分大于活动价格!',
						icon:'none',
						duration: 2000
					});
				}else{

					uni.showToast({
						title: '您的积分不足或填写错误!',
						icon:'none',
						duration: 2000
					});
				}
				
			}


		},


	}
</script>

<style>
	.tui-list-cell{background-color:fafafa !important}
	.money{padding: 20rpx;}
	.money text{    width: 35%;
    display: inline-block;}
	.sign_name{background-color: #ccc;
    padding: 0 10rpx;}
	/*底部操作栏*/
	
	.tui-col-8 {
		width: 66.66666666%;
	}
	
	.tui-col-4 {
		width: 33.33333333%;
	}
	
	.tui-operation {
		width: 100%;
		height: 100rpx;
		/* box-sizing: border-box; */
		background: rgba(255, 255, 255, 0.98);
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 10;

	}
	
	.tui-safearea-bottom {
		width: 100%;
		height: env(safe-area-inset-bottom);
	}
	
	.tui-operation::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		border-top: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}
	
	.tui-operation-left {
		display: flex;
		align-items: center;
	}
	
	.tui-operation-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;
	}
	
	.tui-operation-text {
		font-size: 22rpx;
		color: #333;
	}
	
	.tui-opacity {
		opacity: 0.5;
	}
	
	.tui-scale-small {
		transform: scale(0.9);
		transform-origin: center center;
	}
	
	.tui-operation-right {
width: 400rpx;
    font-size: 30rpx;
    height: 70rpx;
    line-height: 70rpx;
    background: #ff7900 !important;
    color: #fff;
    text-align: center;
    border-radius: 50rpx;
    position: flexd;
    right: 50rpx;
    top: 50rpx;
	}
	
	.tui-right-flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.tui-btnbox-4 .tui-btn-class {
		width: 90% !important;
		display: block !important;
		font-size: 28rpx !important;
	}
	
	.tui-operation .tui-badge-class {
		position: absolute;
		top: -6rpx;
		/* #ifdef H5 */
		transform: translateX(50%)
			/* #endif  */
	}
	
	.tui-flex-1 {
		flex: 1;
	}
	
	/*底部操作栏*/
	/* 参团 */
	.personnel{padding:10px}
	.title{font-weight: 600;position: relative;}
	.price{float:right;font-size:24rpx;color:red;line-height:40rpx}
	.title:before{
			content: "";
			position: absolute;
			left:0;
			bottom:2rpx;
			width:60rpx;
			height:4rpx;
			background-color:rgb(255, 204, 0);
	}
		.button{background-color: rgb(255, 204, 0);
padding: 20rpx 10rpx;
width: 60%;
margin: 40rpx auto;
border-radius: 20rpx;
text-align: center;
}
		
	
	/* 商品列表*/
	
	.tui-product-list {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 20rpx 20rpx;
	}
	
	.tui-product-container {
		flex: 1;
		margin-right: 10rpx;
	}
	
	.tui-product-container:last-child {
		margin-right: 0;
	}
	
	.tui-pro-item {
		position: relative;
		padding-top: 30rpx;

	
	}
	
	.tui-flex-list {
		display: flex;
		margin-bottom: 1rpx !important;
		border-bottom: 1rpx solid #ccc;
		padding-bottom: 20rpx;
	
	}
	
	.tui-pro-img {
width: 150rpx;
    height: 150rpx;
    border-radius: 20rpx;
	}
	
	.tui-proimg-list {
		width: 260rpx;
		height: 260rpx !important;
		flex-shrink: 0;
		border-radius: 12rpx;
	}
	
	.tui-pro-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
		position: absolute;
		left: 130px;
		top: 0;
	
	}
	
	.tui-pro-tit {
		color: #2e2e2e;
		font-size: 32rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	
	.tui-pro-price {
		padding-top: 18rpx;
	}
	
	.tui-sale-price {
		font-size: 34rpx;
		font-weight: 500;
		color: #e41f19;
	}
	
	.tui-factory-price {
		font-size: 30rpx;
		color: #a0a0a0;
		padding-left: 6rpx;
	}
	
	.tui-pro-pay {
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #656565;
	}
	/* 商品列表*/
	
	.paragraph{width:100%;height:10rpx;background-color:rgba(0,0,0,.06)}
	
	
	.tui-btn-block {
		font-size: 36rpx;
		height: 90rpx;
		line-height: 90rpx;
	}
	.tui-danger {
		background: rgb(255, 204, 0) !important;
		color: #fff;
		font-size:32upx;
		border-radius: 0;
	}
	.tui-addr-box {
		padding: 20rpx 0;
	}
	
	.tui-line-cell {
		width: 100%;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		background: #fafafa;
		align-items: center;
	}
	
	.tui-title {
		width: 220rpx;
		font-size: 28rpx;
	}
	
	.tui-title-city-text {
		width: 180rpx;
		height: 40rpx;
		display: block;
		line-height: 46rpx;
	}
	
	.tui-input {
		width: 500rpx;
	}
	
	.tui-input-city {
		flex: 1;
		height: 40rpx;
		font-size: 28rpx;
		padding-right: 30rpx;
	}
	
	.tui-phcolor {
		color: #ccc;
		font-size: 28rpx;
	}
	.tui-cell-title{
		font-size: 28rpx;
	}
	.tui-addr-label {
		margin-left: 70rpx;
	}
	
	.tui-label-item {
		width: 76rpx;
		height: 40rpx;
		border: 1rpx solid rgb(136, 136, 136);
		border-radius: 6rpx;
		font-size: 26rpx;
		text-align: center;
		line-height: 40rpx;
		margin-right: 20rpx;
		display: inline-block;
		transform: scale(0.9);
	}
	.tui-label-active{
		background: #E41F19;
		border-color:#E41F19;
		color: #fff;
	}
	.tui-swipe-cell {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

		padding: 10rpx 24rpx;
		border-radius: 6rpx;
		overflow: hidden;
		font-size: 28rpx;
	}
	
	.tui-switch-small {
		transform: scale(0.8);
		transform-origin: 100% center;
	}
	
	/* #ifndef H5 */
	.tui-switch-small .wx-switch-input {
		margin: 0 !important;
	}
	
	/* #endif */
	
	/* #ifdef H5 */
	>>>uni-switch .uni-switch-input {
		margin-right: 0 !important;
	}
	
	/* #endif */
	
	.tui-addr-save {
		padding: 24rpx;
		margin-top: 100rpx;
	}
	
	.tui-del {
		padding: 24rpx;
	}
	
</style>
